<template>
  <div class="department-statistics">
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="部门评分排名" style="margin-bottom: 16px;">
          <a-table
            :columns="rankColumns"
            :dataSource="departmentRankData"
            :pagination="false"
          >
            <template #score="text">
              <a-progress :percent="text" :stroke-color="getColor(text)" />
            </template>
          </a-table>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="部门评分趋势">
          <div class="trend-chart">
            <div v-for="item in departmentTrendData" :key="item.department" class="trend-item">
              <h4>{{ item.department }}</h4>
              <a-progress 
                :percent="item.currentScore" 
                :stroke-color="getColor(item.currentScore)"
                :success-percent="item.lastScore"
                status="active"
              />
              <p class="trend-text">
                当前学期: {{ item.currentScore }}分 
                <span :class="getTrendClass(item.trend)">
                  <a-icon :type="item.trend > 0 ? 'arrow-up' : 'arrow-down'" />
                  {{ Math.abs(item.trend) }}%
                </span>
              </p>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rankColumns: [
        { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
        { title: '部门名称', dataIndex: 'department', key: 'department' },
        { title: '平均分', dataIndex: 'score', key: 'score', scopedSlots: { customRender: 'score' } },
        { title: '教师人数', dataIndex: 'teacherCount', key: 'teacherCount' }
      ],
      departmentRankData: [
        { rank: 1, department: '信息工程系', score: 88, teacherCount: 32 },
        { rank: 2, department: '机电工程系', score: 85, teacherCount: 28 },
        // 更多部门数据...
      ],
      departmentTrendData: [
        { department: '信息工程系', currentScore: 88, lastScore: 85, trend: 3.5 },
        { department: '机电工程系', currentScore: 85, lastScore: 83, trend: 2.4 },
        // 更多趋势数据...
      ]
    }
  },
  methods: {
    getColor(score) {
      if (score >= 90) return '#52c41a'
      if (score >= 80) return '#1890ff'
      if (score >= 70) return '#faad14'
      return '#f5222d'
    },
    getTrendClass(trend) {
      return trend > 0 ? 'up' : 'down'
    }
  }
}
</script>

<style scoped>
.trend-chart {
  margin-top: 10px;
}
.trend-item {
  margin-bottom: 20px;
}
.trend-item h4 {
  margin-bottom: 5px;
}
.trend-text {
  margin-top: 5px;
  font-size: 12px;
}
.up {
  color: #52c41a;
}
.down {
  color: #f5222d;
}
</style>